import React, { startTransition, useEffect, useState } from 'react'
import '../css/login.css'
import 'animate.css';
import { useNavigate } from 'react-router-dom';
import {
    WechatOutlined,
    QqOutlined,
    WeiboCircleOutlined
} from '@ant-design/icons';
import {debounce,throttle} from 'lodash'
import axios from 'axios'
import { Button, Modal, Space, Toast, Divider } from 'antd-mobile'


export default function Login() {
    const Navigate = useNavigate()
    const [tell, settell] = useState('')
    const [password, setpassword] = useState('')

    function adapter(){
        const dip = document.documentElement.clientWidth;
        const rootFontSize = dip *100 / 375 
        document.documentElement.style.fontSize = rootFontSize + 'px'
    }
    adapter()
    window.onresize = adapter 
    const debounceAdapter = debounce(adapter, 300);
    useEffect(() => {
        debounceAdapter();
        window.addEventListener('resize', debounceAdapter);
        return () => window.removeEventListener('resize', debounceAdapter);
        // 解决代码健壮性问题，避免内存泄漏
    }, []);

    
    const denglu =async () =>{
        let data = await axios.post('http://127.0.0.1:3000/login',{tell,password})
        if(data.data.data.code==200){
            Navigate('/home')
            sessionStorage.setItem('token',data.data.short_token)
            sessionStorage.setItem('longtoken',data.data.long_token)
        }else if(data.data.data.code==400){
            Modal.alert({
                content:'账户或密码错误，登录失败',
                onConfirm:()=>{
                    console.log('Confirmed');
                }

            })
        }else if(data.data.data.code==401){
            Modal.alert({
                content:'账号不存在，注册账号后登录',
                onConfirm:()=>{
                    console.log('Confirmed');
                }
            })

        } 
        console.log(data);
    }




    return (
        <div className='box-log'>
            <div className='logo-img'>

                <div className='head'>
                    <img src="/2x.png" alt="" className='footer animate__animated animate__bounce animate__delay-2s animate__backInRight' />
                    <input type="text" placeholder='   手机号/邮箱' className='animate__animated animate__backInRight'
                        value={tell} onChange={(event) => {
                            settell(event.target.value)
        
                        }} /><br />
                    <input type="password" placeholder='   密码' className='animate__animated animate__backInRight'
                        value={password} onChange={(event) => {
                            setpassword(event.target.value)
                        }} />
                </div>
                <div className='animate__animated animate__bounce  animate__fadeInDownBig'>
                    <div className='boot'>
                        <button className='footer animate__animated animate__bounce animate__delay-2s animate__zoomInUp' onClick={()=>{
                            Navigate('/home')
                        }}>忘记密码</button>
                        <div className='dl-con'>
                            <img src="/4x.png" alt="" onClick={denglu} />
                            <p>start/stop</p>
                        </div>
                        <button className='footer animate__animated animate__bounce animate__delay-2s animate__zoomInUp' 
                        onClick={()=>{
                            Navigate("/tell")
                        }}>注册</button>

                    </div>  
                </div>
                <div className='bottom'>
                    <div>
                        <WechatOutlined style={{ color: '#17b426', fontSize: '35px' }} />
                    </div>

                    <div>
                        {/* <button onClick={()=>{
                    Navigate('/tell')
                }}>手机号登陆</button> */}
                        <WeiboCircleOutlined style={{ backgroundColor: 'red', fontSize: '35px' }} />
                    </div>

                    <div>
                        <QqOutlined style={{ color: '#2359a3', fontSize: '35px' }} />
                    </div>

                </div>
                <div className='bot-log'>
                    <p>登陆即表明同意 <span>《车+用户协议》</span>和<span>《隐私政策》</span></p>
                </div>
            </div>
        </div>
       
    )
}
